<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>综合练习</title>
</head>
<script src="./js/react.development.js"></script>
<script src="./js/react-dom.development.js"></script>
<!-- 引入 babel  将jsx语法 转换为 js语法 -->
<script src="./js/babel.min.js"></script>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    ul {
        width: 400px;
        margin: auto;

    }

    ul li {
        list-style: none;
        line-height: 30px;

    }

    .hot {
        float: right;
        height: 25px;
        width: 25px;
        background-color: rgb(171, 66, 66);
        color: white;
        line-height: 25px;
        text-align: center;
        border-radius: 50%;
        font-size: 13px;


    }
</style>

<body>
    <div id="root"></div>
</body>
<script type="text/babel">
    function fn(a){
        return ()=>{
           alert("标题是："+a.title)

        }
        
    }
    let news = [
        {
            id: 1,
            title: "创新引领 科技赋能",
            hot: "热",
            time: "2022-01-20"
        },
        {
            id: 2,
            title: "义乌：主动报告后被判密接奖励五千",
            hot: "荐",
            time: "2022-10-20"
        }, {
            id: 3,
            title: "坚守三条控制线 服务高质量发展",
            hot: "热",
            time: "2022-11-20"
        }, {
            id: 4,
            title: "小猫开门让扫地机器人下27楼",
            hot: null,
            time: "2022-12-20"
        }, {
            id: 5,
            title: "俄方吊唁女王后 英方说“笔丢了”",
            hot: "火",
            time: "2022-09-21"
        }, {
            id: 6,
            title: "龚俊向丰巢快递柜索赔101万",
            hot: null,
            time: "2022-09-22"
        }, {
            id: 7,
            title: "大部分四天工作制试点公司成功了",
            hot: null,
            time: "2022-09-23"
        }, {
            id: 8,
            title: "俄网友24小时直播灶台燃火",
            hot: "热",
            time: "2022-09-24"
        }, {
            id: 9,
            title: "姆巴佩拒绝出席法国队合影",
            hot: null,
            time: "2022-09-25"
        }
    ]
    let vdom = <ul>
        {
            news.map((iteam, index) => {
                return <li key={iteam.id}>
                    <span>{index + 1}</span>
                    <span onClick={fn(iteam)}>.{iteam.title}</span>
                    {iteam.hot ? <span className="hot">{iteam.hot}</span> : null}


                </li>
            })
        }
    </ul>
    ReactDOM.render(vdom, document.getElementById("root"))
</script>

</html>